import { useImmerStore } from "@/store/immer";
import { useShallow } from "zustand/react/shallow";

export default function TestDem3() {
  console.log("testDemo3==>组件渲染");
  // 直接解构，多个组件用情况下，即使另一个组件没有用这个属性，一旦这里改变这个属性值，
  // 也会触发其他使用这个对象其他属性的组件重新渲染
  // const { grounp, count } = useImmerStore();

  // 1. 不使用解构，使用字段较少情况
  // const two = useImmerStore((state) => state.grounp.two);
  // const count = useImmerStore((state) => state.count);

  // 2. 使用useShallow
  const { two, count } = useImmerStore(
    useShallow((state) => ({ two: state.grounp.two, count: state.count }))
  );
  return (
    <div>
      <h1>testDemo3</h1>
      <p>one: {two}</p>
      <p>count: {count}</p>
    </div>
  );
}
